<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厨房管家 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 新拟物化风格 */
        .neumorphic {
            background: #f0f0f3;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
        }
        
        .neumorphic-inset {
            background: #f0f0f3;
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-btn {
            background: #f0f0f3;
            box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
            transition: all 0.3s ease;
        }
        
        .neumorphic-btn:hover {
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-card {
            background: #f0f0f3;
            box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
            transition: all 0.3s ease;
        }
        
        .neumorphic-card:hover {
            transform: translateY(-5px);
            box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff;
        }
        
        /* iPhone 16 Pro 样式 */
        .iphone-container {
            width: 390px;
            height: 844px;
            border-radius: 55px;
            overflow: hidden;
            position: relative;
            background: #000;
            padding: 10px;
        }
        
        .iphone-screen {
            width: 100%;
            height: 100%;
            border-radius: 45px;
            overflow: hidden;
            background: #f0f0f3;
            position: relative;
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: #f0f0f3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* 动态岛 */
        .dynamic-island {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 20px;
            z-index: 10;
        }
        
        /* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        /* 卡片动画 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="iphone-container">
        <div class="iphone-screen">
            <!-- 动态岛 -->
            <div class="dynamic-island"></div>
            
            <!-- 状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex gap-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="px-6 pb-6 h-full overflow-y-auto">
                <!-- 标题区 -->
                <div class="text-center mt-8 mb-10">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">厨房管家</h1>
                    <p class="text-gray-600">让每一餐都充满爱意</p>
                </div>
                
                <!-- 功能卡片网格 -->
                <div class="grid grid-cols-2 gap-6">
                    <!-- 菜品管理卡片 -->
                    <div class="neumorphic-card rounded-3xl p-6 cursor-pointer" onclick="navigateTo('dishes.html')">
                        <div class="text-center">
                            <div class="w-20 h-20 neumorphic rounded-2xl flex items-center justify-center mx-auto mb-4 gradient-bg">
                                <i class="fas fa-utensils text-white text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">菜品管理</h3>
                            <p class="text-sm text-gray-600">管理您的菜品库</p>
                        </div>
                    </div>
                    
                    <!-- 点餐卡片 -->
                    <div class="neumorphic-card rounded-3xl p-6 cursor-pointer" onclick="navigateTo('order.html')">
                        <div class="text-center">
                            <div class="w-20 h-20 neumorphic rounded-2xl flex items-center justify-center mx-auto mb-4 bg-orange-400">
                                <i class="fas fa-clipboard-list text-white text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">点餐</h3>
                            <p class="text-sm text-gray-600">选择今日美食</p>
                        </div>
                    </div>
                    
                    <!-- 订单管理卡片 -->
                    <div class="neumorphic-card rounded-3xl p-6 cursor-pointer" onclick="navigateTo('orders.html')">
                        <div class="text-center">
                            <div class="w-20 h-20 neumorphic rounded-2xl flex items-center justify-center mx-auto mb-4 bg-green-400">
                                <i class="fas fa-chart-line text-white text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">订单管理</h3>
                            <p class="text-sm text-gray-600">查看订单状态</p>
                        </div>
                    </div>
                    
                    <!-- 统计卡片 -->
                    <div class="neumorphic-card rounded-3xl p-6 cursor-pointer">
                        <div class="text-center">
                            <div class="w-20 h-20 neumorphic rounded-2xl flex items-center justify-center mx-auto mb-4 bg-blue-400">
                                <i class="fas fa-chart-pie text-white text-3xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">统计分析</h3>
                            <p class="text-sm text-gray-600">查看用餐统计</p>
                        </div>
                    </div>
                </div>
                
                <!-- 快速操作区 -->
                <div class="mt-10">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">快速操作</h3>
                    <div class="space-y-3">
                        <div class="neumorphic rounded-2xl p-4 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 neumorphic rounded-xl flex items-center justify-center">
                                    <i class="fas fa-plus text-purple-600"></i>
                                </div>
                                <span class="text-gray-800 font-medium">快速添加菜品</span>
                            </div>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                        
                        <div class="neumorphic rounded-2xl p-4 flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 neumorphic rounded-xl flex items-center justify-center">
                                    <i class="fas fa-clock text-blue-600"></i>
                                </div>
                                <span class="text-gray-800 font-medium">今日订单</span>
                            </div>
                            <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="absolute bottom-0 left-0 right-0 neumorphic-inset rounded-t-3xl">
                <div class="flex justify-around py-4">
                    <div class="text-center">
                        <i class="fas fa-home text-purple-600 text-xl"></i>
                        <p class="text-xs mt-1 text-purple-600">首页</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-search text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">搜索</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-plus-circle text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">添加</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-user text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">我的</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function navigateTo(url) {
            window.location.href = url;
        }
    </script>
</body>
</html>